<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE6对hover的兼容问题</title>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    /*IE6支持hover的方法*/
    /*body{
        behavior:url(csshover.htc);
    }*/
    .top-nav
        {
            font-size: 12px;
            font-weight: bold;
            list-style: none;
            overflow: auto;
        }
        .top-nav li
        {
            float: left;
            margin-right: 1px;
        }
        .top-nav li a
        {
            line-height: 20px;
            text-decoration: none;
            background: #DDDDDD;
            color: #666666;
            display: block;
            width: 80px;
            text-align: center;
        }
        .top-nav li a:hover{
            background: red;
            color: #fff;
        }
        .top-nav ul{
            display: none;
            list-style: none;
            padding: 0;
            width: 80px;
            height: 20px;
            position: relative;
        }
        .top-nav li ul li ul{
            position: absolute;
            top: 0px;
            left: 80px;
        }
        .top-nav li:hover ul{
            display: block;
             
         }
        .top-nav li:hover ul li ul{
            display: none;
        }
        .top-nav li ul li:hover ul{
            display: block;   
        }
    </style>
  <!--   <script type="text/javascript">
    window.onload=function(){
        var isIE=!!window.ActiveXObject;
        var isIE6=isIE && !window.XMLHttpRequest;
        if (isIE6) {
            var Lis=document.getElementsByTagName("li");
            for(var i=0;i<Lis.length;i++){
                Lis[i].onmouseover=function(){
                    var u=this.getElementsByTagName("ul")[0];
                    if(u!=undefined){
                        u.style.display='block';
                    }
                }
                Lis[i].onmouseout=function(){
                    var u=this.getElementsByTagName("ul")[0];
                    if(u!=undefined){
                        u.style.display='none';
                    }
                }
            }
        };
    }
    </script> -->
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        if($.browser.msie && $.browser.version.substr(0,1)<7){
            $("li").has("ul").mouseover(function(){
                $(this).children("ul").css("display","block");
            }).mouseout(function(){
                $(this).children("ul").css("display","none");
            })
        }
    });
    </script>
</head>
<body>
<ul class="top-nav">
    <li><a href="">网站首页</a></li>
    <li><a href="">课程大厅</a></li>
    <li><a href="">学习中心+</a>
    <ul>
        <li><a href="">前端课程+</a>
            <ul>
                <li><a href="">javascript</a></li>
                <li><a href="">css</a></li>
                <li><a href="">jquery</a></li>
            </ul>
        </li>
        <li><a href="">后端编程</a></li>
        <li><a href="">手机开发+</a>
            <ul>
                <li><a href="">IOS</a></li>
                <li><a href="">安卓</a></li>
            </ul>
        </li>
    </ul>
    </li>
    <li><a href="">经典案例</a></li>
</ul>
    
</body>
</html>